<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        dl {
            border-bottom: 2px solid #ccc;
            margin: 10px;
            padding: 10px;
        }
        dl .show {min-height:72px;border: 1px solid #ddd;}
    </style>
</head>
<body>

<div id="app">
    <dl>
        <dt>多行文本</dt>
        <dd class="ipt"><textarea name="" id="" cols="30" rows="10" v-model="text"></textarea></dd>
        <dd class="show">
            text:
            <div>{{text}}</div>
        </dd>
    </dl>

    <dl>
        <dt>多选</dt>
        <dd>
            <label>Lili:<input type="checkbox" value="Lili" v-model="names"></label>
            <label>Tom:<input type="checkbox" value="Tom" v-model="names"></label>
            <label>Jack:<input type="checkbox" value="Jack" v-model="names"></label>
        </dd>
        <dd class="show">
            names:
            <div>{{names}}</div>
        </dd>
    </dl>

    <dl>
        <dt>单选</dt>
        <dd>
            <label>Male:<input type="radio" value="Male" v-model="gender"></label>
            <label>Female:<input type="radio" value="Female" v-model="gender"></label>
        </dd>
        <dd class="show">
            gender:
            <div>{{gender}}</div>
        </dd>
    </dl>

    <dl>
        <dt>下拉列表</dt>
        <dd>
            <select name="" v-model="city">
                <option value="" disabled>---</option>
                <option value="SH">SH</option>
                <option value="BJ">BJ</option>
                <option value="HZ">HZ</option>
                <option value="WH">WH</option>
                <option value="GD">GD</option>
            </select>
        </dd>
        <dd class="show">
            city:
            <div>{{city}}</div>
        </dd>
    </dl>

    <dl>
        <dt>下拉列表-多选</dt>
        <dd>
            <select name="" v-model="mCity" multiple>
                <option value="" disabled>---</option>
                <option value="SH">SH</option>
                <option value="BJ">BJ</option>
                <option value="HZ">HZ</option>
                <option value="WH">WH</option>
                <option value="GD">GD</option>
            </select>
        </dd>
        <dd class="show">
            city:
            <div>{{mCity}}</div>
        </dd>
    </dl>


</div>
</body>
<script src="../../vender/vue@2.4.2.js"></script>
<script>

    var app=new Vue({
        el:'#app',
        data:{
            text:'',
            names:[],
            gender:'',
            city:'SH',
            mCity:[]
        }
    });

</script>
</html>